<template>
    <div class="VonBDUSelect">
        <div class="label" v-if="label">{{label}}</div>
        <span class="horizontalLabel" v-if="horizontalLabel">{{horizontalLabel}}</span>
        <el-select :placeholder="placeholder"
                   :style="customStyle"
                   v-bind="$attrs"
                   v-on="$listeners"
                   size="small"
                   clearable
                   :multiple="isMultiple"
                   :collapse-tags="isMultiple">
            <el-option v-for="item in newOptions" :key="item.wayCode" :label="item.detectionPoint" :value="String(item.wayCode)">
<!--            <el-option v-for="item in newOptions" :key="item.wayCode" :label="item.detectionPoint" :value="item.detectionPoint">-->
            </el-option>
        </el-select>
    </div>
</template>

<script>
  export default {
    name: "VonBDUSelect",
    data(){
      return{
      }
    },
    props: {
      options: {
        type: Array,
        default() {
          return [{ name: "全部", id: "all" }];
        }
      },
      horizontalLabel: {
        type: String,
        default: ""
      },
      isMultiple: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: ""
      },
      width: {
        type: String,
        default: "120px"
      },
      height: {
        type: String,
        default: "60px"
      },
      label: {
        type: String,
        default: ""
      }
    },
    computed: {
      customStyle() {
        let styleObj = {};
        styleObj.width = this.width;
        styleObj.height = this.height;
        styleObj.lineHeight = this.height;
        return styleObj;
      },
      newOptions() {
        let arr = [...this.options];
        let newList = arr.filter(item=>{
          return !!item.detectionPoint === true;
        });
        return newList
      }
    }
  };
</script>

<style  lang="scss" scoped>
    .VonBDUSelect {
        width: calc(100% - 38px);
        margin: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        .horizontalLabel{
            flex: 0 0 90px;
            margin-right: 10px;
            height: 40px;
            line-height: 40px;
            color: white;
            font-size: 12px;
            text-align: center;
        }
        .label {
            flex: 0 0 90px;
            margin-right: 4px;
            height: 40px;
            line-height: 40px;
            color: white;
            font-size: 12px;
            text-align: center;
        }
        .el-input__inner {
            background: transparent;
            color: white;
        }
    }
    /deep/.VonSelect{
        .el-select{
            width: 120px!important;
        }
    }
</style>
